"use client"

import type React from "react"

import { useState } from "react"
import { ArrowLeft, Upload, Heart, Share2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

// 示例数据
const initialCocktails = [
  {
    id: 1,
    title: "夏日莓果特调",
    image: "/placeholder.svg?height=400&width=300",
    author: "调酒师小王",
    likes: 156,
    hasLiked: false,
  },
  {
    id: 2,
    title: "薄荷莫吉托",
    image: "/placeholder.svg?height=500&width=300",
    author: "调酒师小李",
    likes: 234,
    hasLiked: true,
  },
  {
    id: 3,
    title: "蓝色珊瑚礁",
    image: "/placeholder.svg?height=450&width=300",
    author: "调酒师小张",
    likes: 89,
    hasLiked: false,
  },
  // 添加更多示例数据...
]

export default function CabinetPage() {
  const router = useRouter()
  const [cocktails, setCocktails] = useState(initialCocktails)
  const [selectedImage, setSelectedImage] = useState<string | null>(null)

  const handleLike = (id: number) => {
    setCocktails(
      cocktails.map((cocktail) => {
        if (cocktail.id === id) {
          return {
            ...cocktail,
            likes: cocktail.hasLiked ? cocktail.likes - 1 : cocktail.likes + 1,
            hasLiked: !cocktail.hasLiked,
          }
        }
        return cocktail
      }),
    )
  }

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        setSelectedImage(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  return (
    <div className="min-h-screen bg-[#f9f8f6]">
      {/* Header */}
      <div className="fixed top-0 left-0 right-0 bg-white border-b z-10">
        <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" onClick={() => router.push("/")} className="mr-2">
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <h1 className="text-lg font-medium">我的酒柜</h1>
          </div>
          <Dialog>
            <DialogTrigger asChild>
              <Button>
                <Upload className="w-4 h-4 mr-2" />
                上传作品
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>分享你的调酒作品</DialogTitle>
              </DialogHeader>
              <div className="space-y-4 pt-4">
                <div className="space-y-2">
                  <Label htmlFor="title">作品名称</Label>
                  <Input id="title" placeholder="为你的作品起个名字" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="description">作品描述</Label>
                  <Textarea id="description" placeholder="介绍一下你的作品..." />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="image">上传图片</Label>
                  <Input id="image" type="file" accept="image/*" onChange={handleImageUpload} />
                  {selectedImage && (
                    <div className="mt-2 relative aspect-[3/4] rounded-lg overflow-hidden">
                      <Image src={selectedImage || "/placeholder.svg"} alt="Preview" fill className="object-cover" />
                    </div>
                  )}
                </div>
                <Button className="w-full">发布作品</Button>
              </div>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-5xl mx-auto px-4 pt-20">
        <div className="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
          {cocktails
            .sort((a, b) => b.likes - a.likes)
            .map((cocktail) => (
              <div
                key={cocktail.id}
                className="break-inside-avoid bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
              >
                <div className="relative aspect-[3/4]">
                  <Image
                    src={cocktail.image || "/placeholder.svg"}
                    alt={cocktail.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="p-4 space-y-2">
                  <div className="flex items-center justify-between">
                    <h3 className="font-medium">{cocktail.title}</h3>
                    <p className="text-sm text-gray-500">{cocktail.author}</p>
                  </div>
                  <div className="flex items-center justify-between">
                    <Button
                      variant="ghost"
                      size="sm"
                      className={`gap-1 ${cocktail.hasLiked ? "text-red-500" : "text-gray-500"}`}
                      onClick={() => handleLike(cocktail.id)}
                    >
                      <Heart className={`w-4 h-4 ${cocktail.hasLiked ? "fill-current" : ""}`} />
                      <span>{cocktail.likes}</span>
                    </Button>
                    <Button variant="ghost" size="sm" className="text-gray-500">
                      <Share2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  )
}

